<template>
    <v-menu>
      <template #activator="{ props }">
        <v-btn variant="text" v-bind="props">
          <v-avatar size="32" color="primary">
            <v-icon v-if="!user.avatar" icon="mdi-account" />
            <v-img v-else :src="user.avatar" />
          </v-avatar>
          <span class="ml-2">{{ user.name }}</span>
          <v-icon icon="mdi-chevron-down" />
        </v-btn>
      </template>
  
      <v-list>
        <v-list-item
          v-for="(item, index) in userMenu"
          :key="index"
          :prepend-icon="item.icon"
          :title="item.title"
          :value="item.value"
          @click="handleUserMenuClick(item)"
        />
      </v-list>
    </v-menu>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  interface User {
    name: string
    avatar: string | null
    role: string
  }
  
  interface MenuItem {
    title: string
    icon: string
    value: string
    divider?: boolean
  }
  
  const user = ref<User>({
    name: '管理员',
    avatar: null,
    role: 'admin'
  })
  
  const userMenu = ref<MenuItem[]>([
    { title: '个人资料', icon: 'mdi-account', value: 'profile' },
    { title: '系统设置', icon: 'mdi-cog', value: 'settings' },
    { title: '', icon: '', value: '', divider: true },
    { title: '退出登录', icon: 'mdi-logout', value: 'logout' }
  ])
  
  function handleUserMenuClick(item: MenuItem) {
    switch (item.value) {
      case 'logout':
        // 处理退出登录逻辑
        break
      // 其他菜单项处理...
    }
  }
  </script>